<template>
	<div class="searchDeatilContainer">
		<el-page-header @back="goBack" content="详情页面"></el-page-header>
		<div class="mainCon">
			<div class="mainCon-left">
				<div class="left-top">
					<p>分析项目编号：001</p>
					<div>
						<span>数据类型：</span>
						<el-select v-model="value" placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</div>
					<div>
						<span class="targetsty">分析目标：</span>
						<el-input v-model="input" placeholder="请输入内容"></el-input>
					</div>
					<button @click="downLoad">完整威胁情报报告下载</button>
				</div>
				<div class="left-bottom">
					<p>Related indicator</p>
					<div class="nodesList" v-for="(item, key, index) in message.data.nodes" :key="index">
						<!-- <a :href="'http://' + key">{{key}}</a> -->
						{{ key }}
						<span class="sdsp">
							<span>( </span>
							{{ item[2] }}
							<span> )</span>
						</span>
					</div>
				</div>
			</div>
			<div class="mainCon-right">
				<p>Related indicator</p>
				<!-- <v-html-panel :url.sync="url1"></v-html-panel> -->
				<iframe :src="url1" id="mainIframe" ref="mainIframe" name="mainIframe" frameborder="0"></iframe>

				<!-- <v-html-panel :url.asyc="url2"></v-html-panel> -->
			</div>
		</div>
	</div>
</template>

<script>
import $ from 'jquery'
export default {
	data() {
		return {
			options: [],
			value: '',
			input: '',
			message: {
				data: {
					edges: {},
					graph_url: '',
					intelligence: [],
					nodes: {},
				},
			},
			// url1: 'http://139.196.137.184:5004/view/38b411ed-7757-47f0-bdac-3a5984b72c93',
			url1: '',
		}
	},
	async mounted() {
		this.message = this.$route.query.clueSearchMsg
		this.options = this.$route.query.type
		this.input = this.$route.query.value
		this.url1 = this.message.data.graph_url
		let data2 = await this.$http.get(this.url1)
		console.log(data2.data)
	},
	methods: {
		goBack() {
			this.$router.push(`/clueSearch`)
		},
		// 监听iframe中的点击事件
		// onClickIframe() {
		//   //监听iframe子页面，关闭menu
		//   $("#mainIframe").on("load", async function(event){//判断 iframe是否加载完成
		//       let data2 = await this.$http.get("/3/api2");
		//       alert(1)
		//   });
		// },
		downLoad() {
			console.log(this.message.data.intelligence)
			let arr = this.message.data.graph_url.split('/')
			console.log(arr)
			let requestUrl = '/3/report/' + arr[arr.length - 1]
			this.$http.get(requestUrl).then(
				(res) => {
					this.downLoadFun(res)
				},
				async (error) => {
					let data2 = await this.$api.postSearchNext()
					if (data2.status == 200) {
						let arr2 = data2.data.graph_url.split('/')
						let requestUrl2 = '/3/report/' + arr2[arr2.length - 1]
						let data = await this.$http.get(requestUrl2)
						this.downLoadFun(data)
					}

					console.log(data2)
				}
			)
			// console.log(data)
		},
		downLoadFun(data) {
			var element = document.createElement('a')
			element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data.data))
			element.setAttribute('download', new Date().getTime() + '.txt')

			element.style.display = 'none'
			document.body.appendChild(element)

			element.click()

			document.body.removeChild(element)
		},
	},
}
</script>

<style scoped>
.searchDeatilContainer {
	width: 98%;
	height: 87%;
	margin: 20px auto;
	display: flex;
	flex-direction: column;
}
.mainCon {
	width: 100%;
	height: 96%;
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
}
.mainCon-left {
	width: 30%;
	height: 100%;

	display: flex;
	flex-direction: column;
}
.left-top {
	width: 100%;
	height: 30%;
	margin-bottom: 20px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}
.left-top > div span {
	font-size: 14px;
	color: #666666;
	width: 100px;
}
.left-top > div {
	margin-left: 20px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}
.left-top button {
	border: 1px solid transparent;
	outline: none;
	font-size: 14px;
	width: 160px;
	height: 30px;
	text-align: center;
	padding: 5px 5px;
	border-radius: 2px;
	background-color: rgba(21, 150, 255, 1);
	color: #ffffff;
	margin-left: 120px;
}
.left-top button:hover {
	cursor: pointer;
}
.left-bottom {
	width: 100%;
	height: 67.4%;
	background-color: #ffffff;
	height: 525px;
	overflow-y: auto;
}
.mainCon-right {
	width: 68.8%;
	height: 100%;
	background-color: #ffffff;
}
p {
	margin-left: 20px;
	font-size: 16px;
	font-weight: 600;
}
.targetsty {
	margin-right: 20px;
}
.nodesList {
	color: #2663a8;
	margin-left: 50px;
}
.nodesList .sdsp {
	color: #3f98fd;
}
.nodesList span {
	color: black;
}
#mainIframe {
	width: 100%;
	height: 700px;
}
</style>

<style>
.searchDeatilContainer .el-input--suffix .el-input__inner {
	width: 300px;
}
.searchDeatilContainer .el-input__inner {
	width: 300px;
}
</style>
